@include base {
    &-links {
        $links-title: (
            default: 24px,
            lg: 36px
        );
        $links-font-size: (
            default: 14px,
            lg: 16px
        );
        $links-li-width: (
            default: 50%,
            sm: 25%,
            md: 16.666666%
        );
        $links-padding: (
            default: 30px 0,
            md: 60px 0 30px
        );
        
        background-color: #f7f7f7;
        @include responsive($links-padding, padding);
        
        .title {
            color: #444;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            @include responsive($links-title, font-size);
            
            i {
                display: block;
                width: 30px;
                height: 5px;
                background: url('~assets/images/line-small.png') no-repeat center;
                background-size: cover;
                margin: 0 auto 8px;
            }
        }
        
        .links {
            font-size: 0;
            
            ul, li {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            li {
                display: inline-block;
                margin: 0 0 24px;
                position: relative;
                padding-left: 15px;
                @include responsive($links-font-size, font-size);
                @include responsive($links-li-width, width);
                
                a {
                    color: #444;
                    text-decoration: none;
                    @include transition(color 400ms ease);
                    
                    &:hover {
                        color: #3a85fa;
                    }
                }
                
                &:before {
                    content: '\20';
                    display: block;
                    position: absolute;
                    left: 0;
                    top: 50%;
                    margin-top: -3px;
                    width: 6px;
                    height: 6px;
                    background-color: #dadada;
                }
            }
        }
    }
}

@include adaptive(md) {
    @include base {
        &-links {
            .title {
                text-align: left;
                
                i {
                    margin: 0 0 18px;
                }
            }
        }
    }
}